<template>
	<view>
		<!-- 行程 -->
		<view class="routeBox">
			<view 
			v-for="(route,index) in routes"
			:key="index"
			:checked="route.checked"
			class="routeList">
			<view class="routeTime">
				<view class="timeFl">
					 <checkbox-group v-if="test12(route.routeCons) == 1" >
						<label>
							<checkbox 
							value="1" 
							color="#55A0FF" 
							style="transform:scale(0.7)"
							 @tap="calcTotal(route)"
							 />
						</label>
					</checkbox-group>
					<text>{{route.time}}</text>
					<text>{{route.shortName}}</text>
				</view>
				
				<view class="moreFr">
					<image 
					@tap="showEditTc(index)" src="/static/myPic/right-dian.png"></image>
					<!-- 显示悬浮框 -->
					<view class="moreTc" v-if="editTcIndex == index">
						<view class="moreTcCon">
							<view @click="togglePopup('bottom','share')"><image src="/static/tjShare.png"></image><text>分	享</text></view>
							<view class="editRoute"  @click="togglePopup('bottom','edit')">
								<image src="/static/tjEdit.png"></image>
								<text>编辑名称</text>
							</view>
							<view 
								@click="togglePopup('bottom','money')"
								class="setMoney">
								<image src="/static/tjNumb.png"></image>
								<input type="text" disabled="true">
								<text>设定预算</text>
							</view>
							<view @tap="delRoute(index)"><image src="/static/tjDel.png"></image><text>删除行程</text></view>
						</view>
					</view>
				</view>
			</view>
			<view 
			:class="{animationActive:route.isShow}"
			:style="{height:route.isShow ? 115*route.routeCons.length + 'px' : 0}"
			 class="routeBoxTwo">
			 <!-- 第二层循环 -->
			 <view
			 v-for="(item,index1) in route.routeCons"
			 :key="index1"
			 @tap="goRouteDetails(index,index1,item.buyStatus)" >
				 <uni-swipe-action
				 	:options="options2"
				 	@click.stop="bindClick(index,index1)">
				 		<view class="routeConBox" :class="[item.buyStatus == 2 ? 'consumed':'']">
				 			<checkbox-group :style="{visibility:(item.buyStatus == 1 ? '':'hidden')}">
				 				<label>
				 					<checkbox value="1" color="#55A0FF" style="transform:scale(0.7)" />
				 				</label>
				 			</checkbox-group>
				 			<view class="rConFl"><image :src="item.routeImg" mode="scaleToFill"></image></view>
				 			<view class="rConFr">
				 				<view class="rConFrTop">
				 					<view class="rConTitle"><text>{{item.title}}</text></view>
				 					<view class="rConNumb">人数：<text>成人*{{item.parentNumb}}人，儿童*{{item.childrenNumb}}人</text></view>
				 				</view>
				 				<view class="rConMoney">
				 					<view><text>￥{{item.money}}</text></view>
				 					<view class="xiaojiFr" :class="[item.buyStatus == 1 ? 'wxiaojiFr' : '']">{{item.buyStatus == 1 ? '去预定':'已付款'}}</view>
				 				</view>
				 			</view>
				 		</view>
				 </uni-swipe-action>
			 </view>
				
			</view> 
				<view class="moreBtn" @tap="toggleLook(route)">
					<image :src="route.isShow ? '/static/xc-up.png' :'/static/xc-down.png'"></image>
					<text>{{route.isShow ? '收起' : '查看内容详情'}}</text>
				</view>
				
			<view class="yusuanBox">
				<view class="xiaoji">
					<view class="xiaojiFl">
						计划花费：<text>￥{{route.xiaoji}}</text>
					</view>
				</view>
				<view class="yusuan">费用小计：<text>￥{{route.yusuan}}</text></view>
			</view>
			
		</view>
		</view>
		<!-- 暂无行程 -->
		<view class="noRoute" v-if="isShowNoRoute">
			<image src="/static/noRoute.png"></image>
			<text>~还没有添加行程呦~</text>
		</view>
		<!-- 底部结算 -->
		<view class="routeJiesuan" v-if="isShowJs">
			<view class="jsLeft">
				<view>合计：<text>￥{{total}}</text></view>
			</view>
			<view class="jsRight">
				<text>结算</text>
			</view>
		</view>
		<!-- 设定预算 -->
		<uni-popup ref="money" :type="type" :custom="true" @change="ysChange">
			<view class="uni-share">
				<view class="changeTit">
					<text @tap="ysCancel('money')">取消</text>
					<view>修改行程预算</view>
					<text @tap="ysCancel('money')">完成</text>
				</view>
				<view class="changeTime">北京三日游<text>22019-09-08 至 09-10</text></view>
				<view class="changeYs">计划花费	
					<text>￥:</text>
					<input 
					 :value="changeMoney"
					 @input="changeMoneyInp">
				</view>
			</view>
		</uni-popup>
		<!-- 编辑名称 -->
		<uni-popup ref="edit" :type="type" :custom="true" @change="xcChange">
			<view class="uni-share">
					<view class="changeTit">
						<text @tap="xcCancel('edit')">取消</text>
						<view>修改行程名称</view>
						<text @tap="xcCancel('edit')">完成</text>
					</view>
					<view class="changeTime">22019-09-08 至 09-10</view>
					 <view class="changeName">名称
						<input 
						 :value="changeName"
						 @input="changeNameInp">
					</view>
			</view>
		</uni-popup>
		<!-- 分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true" @change="delChange">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		components:{
			uniSwipeAction,
			uniPopup,
		},
		data(){
			return{
				editTcIndex:-1,//默认不显示悬浮框
				togLookText:'查看内容详情',
				isShowNoRoute:false ,//是否显示没有行程
				total: 0, //合计
				type: '',//uniPopup组件类型
				changeName:'北京三日游',//修改行程名称
				isShowJs:true, //当软键盘抬起隐藏底部结算
				changeMoney:178,//修改预算
				routes:[
					{
						time:'22019-09-08 至 09-10',
						shortName:'北京三日游',
						routeCons:[
							{
								routeImg:'/static/testglPic.png',
								title:'北京故宫',
								parentNumb:2,
								childrenNumb:1,
								money:60,
								buyStatus:1//假设1是未消费
							},
							{
								routeImg:'/static/testglPic3.png',
								title:'龙芯昂酒店',
								parentNumb:2,
								childrenNumb:1,
								money:279,
								buyStatus:2 
							},
							
						],
						xiaoji:'195',
						yusuan:'128',
					},
					{
						time:'2019-09-08 至 09-10',
						shortName:'蜜月之旅',
						routeCons:[
							{
								routeImg:'/static/testglPic5.jpg',
								title:'中国青海3日游',
								parentNumb:2,
								childrenNumb:1,
								money:98,
								buyStatus:2 
							},
							{
								routeImg:'/static/testglPic3.png',
								title:'龙芯昂酒店',
								parentNumb:2,
								childrenNumb:1,
								money:279,
								buyStatus:2 
							},
							{
								routeImg:'/static/testglPic3.png',
								title:'龙芯昂酒店',
								parentNumb:2,
								childrenNumb:1,
								money:279,
								buyStatus:2 
							},
						],
						xiaoji:'3488',
						yusuan:'1699',
						
						
					},
					{
						time:'2019-09-08 至 09-10',
						shortName:'北京三日游',
						routeCons:[
							{
								routeImg:'/static/testglPic.png',
								title:'北京故宫',
								parentNumb:2,
								childrenNumb:1,
								money:60,
								buyStatus:1//假设1是未消费
							}
							
						],
						xiaoji:'2099',
						yusuan:'1780',
						
					},
				],
				options2:[{
					text: '删除',
						style: {
							backgroundColor: '#F97474'
						}
					}
				],
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				]
			}
		},
		methods:{
			//展开收起
			toggleLook(route){
					if(!route.isShow){
						this.$set(route,'isShow',false)
							route.isShow = !route.isShow
						
					}else{
							route.isShow = !route.isShow
					}
					console.log(route.isShow);
			},
			
			//点击是否显示编辑弹层
			showEditTc(index){
				if(this.editTcIndex !== index){
					this.editTcIndex = index;
					
				}else{
					this.editTcIndex = -1
				}
				console.log(this.editTcIndex);
			},
			// 删除单个行程
			bindClick(index,index1){
				let vm = this;
				uni.showModal({
					title:'提示',
					content:'确定要删除吗？',
					success:function(res){
						if(res.confirm){
							// 在这里调删除接口
							vm.routes[index].routeCons.splice(index1,1);
							if(vm.routes[index].routeCons.length == 0){
							vm.routes.splice(index,1)
							console.log(vm.routes);
							}
						}else if(res.cancel){
							// 解决view层不同步的问题
							
							console.log('用户点击取消');
						}
					}
				})
			},
			//点击进入行程详情（已消费/未消费）
			goRouteDetails(index,index1,buyStatus){
				if(buyStatus == 1){
					uni.navigateTo({
						url:'/pages/home/scenicSpot/spotDetail'
					})
				}if(buyStatus == 2){
					uni.navigateTo({
						url:'/pages/my/myOrder/orderDetails?orderDetails=1&routeInd=' + index
					})
				}
			},
			// 删除整个行程
			delRoute(index){
				let that = this;
				that.editTcIndex = -1;
				uni.showModal({
					title:'提示',
					content:'确定要删除吗？',
					success:function(res){
						if(res.confirm){
							//在这里调删除接口
						that.routes.splice(index,1);
						if(that.routes.length == 0){
							that.isShowNoRoute = true;
						}else{
							 that.isShowNoRoute = false;
						}
						}else if(res.cancel){
							console.log('用户点击取消');
						}
					}
				})
			},
			
			// 取消编辑行程
			xcCancel(type) {
				this.$refs[type].close()
			},
			// 打开编辑行程
			xcChange(e) {
				console.log(e.show);
				this.editTcIndex = -1;
			},
			// 取消设定预算
			ysCancel(type) {
				this.$refs[type].close()
			},
			// 打开设定预算
			ysChange(e) {
				console.log(e.show);
				this.editTcIndex = -1;
			},
			//打开分享弹窗
			delChange(e){
				this.editTcIndex = -1;
			},
			//实时获取编辑行程value
			changeNameInp(e){
				this.changeName = e.target.value;
			},
			//实时获取取消预算input
			changeMoneyInp(e){
				this.changeMoney = e.target.value
			},
			
			//是否显示外层checkbox
			test12(list){
				for (let i=0; i<list.length; i++){
					if (list[i].buyStatus == 1){
						return list[i].buyStatus
					}
				}
			},
			togglePopup(type,open){
				this.type = type;
				this.$refs[open].open()
			},
			cancel(type) {
				this.$refs[type].close()
			},
			// 给每个routes加选中状态
			addChecked(){
				this.routes.forEach(item =>{
					item.checked = false;
					
				})
			},
			// 计算总价
			calcTotal(route){
				route.checked = !route.checked;
				console.log(route.checked);
				let thisTotal = 0;
				this.routes.forEach(item =>{
					if(item.checked == true){
						thisTotal += Number(item.xiaoji)
					}
				})

				this.total = Number(thisTotal.toFixed(2))
			},
		},
		computed:{
			// isShowCheckBox(){
			// 	this.routes.forEach((item)=>{
			// 		let newCheckBox =  (item.routeCons.filter((item1 => item1.buyStatus == 1)));
			// 		console.log(newCheckBox); 
			// 	})
			// 	
			// 	return false
			// }
		},
		mounted(){
			this.addChecked();
		}
	}
</script>

<style>
	/* 行程 */
	.routeBox{
		margin-top: 44upx;
		}
		.routeList{
			width: 677upx;
			margin: 0 auto 26upx auto;
			box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
		}
	.routeTime{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 18upx 20upx;
	}
	.timeFl{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		}
	.timeFl text:nth-of-type(1){
		font-size: 24upx;
		color:#333 ;
		margin-right: 20upx;
	}
	.timeFl text:nth-of-type(2){
		font-size: 28upx;
		color: #55A0FF;
	}
	.moreFr{
		position: relative;
	}
	.moreFr > image{
		width:50upx;
		height: 50upx;
	}
	.moreTc{
		width:234upx;
		background:rgba(0,0,0,0.8);
		 border-radius: 10upx;
		 position: absolute;
		 z-index: 9;
		 top:80upx;
		 right:0upx;
		 padding:10upx 0;
	}
	.moreTc:before{
		content:"";
		position: absolute;
		right:30upx;
		top:-22upx;
		border:12upx solid transparent;
		border-top-color:#000000 !important;
		border-right-color: #000000 !important;
		opacity: 0.8;
		transform: rotateX(180deg);
	}
	.moreTcCon{
		display:flex ;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.moreTcCon >view{
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 70upx;
	}
	.moreTcCon >view image{
		max-width: 36upx;
		max-height: 33upx;
	}
	.moreTcCon >view text{
		margin-left: 30upx;
		width:50%;
		font-size: 28upx;
		color: #FFFFFF;
	}
	.editRoute, .setMoney{
		position: relative;
		
	}
	.editRoute input, .setMoney input{
		width:100%;
		height: 70upx;
		position: absolute;
	}
	.yusuanBox{
		display: flex;
		flex-direction: column;
		margin: 30upx 30upx 0 30upx;
		padding-bottom: 24upx;
	}
	.xiaoji{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
	}
	.yusuan{
		color: #333333;
		font-size: 28upx;
	}
	.xiaojiFl{
		color: #333333;
		font-size: 28upx;
		margin-top: 20upx;
	}
	.xiaojiFr{
		font-size: 30upx;
		color:#55A0FF;
	}
	.wxiaojiFr{
		color: #ffffff;
		text-align: center;
		line-height: 46upx;
		border-radius: 30upx;
		width: 127upx;
		font-size: 28upx;
		height: 46upx;
		background: -webkit-linear-gradient(left, rgba(142,203,255,1.00),rgba(88,174,255,1.00));
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, rgba(142,203,255,1.00)F,rgba(88,174,255,1.00));
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, rgba(142,203,255,1.00),rgba(88,174,255,1.00));
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, rgba(142,203,255,1.00),rgba(88,174,255,1.00));
		/* 标准的语法 */
	}
	.yusuan text{
		color: #FE990A;
	}
	.xiaojiFl text{
		color: #FF6000;
	}
	.routeConBox{
		border-top:1upx solid #F6F6F6;
		padding:18upx;
		padding-left: 0;
		display: flex;
		flex-direction: row;
		position: relative;
	}
	.routeConBox:last-of-type{
		border-bottom:1upx solid #F6F6F6;
	}
	.rConFl{
		width:190upx;
		height: 174upx;
	}
	.rConFl image{
		width:190upx;
		height: 174upx;
		border-radius: 12upx;
		background-color: #ddd;
	}
	.rConFr{
		display:flex ;
		flex-direction:column;
		width:444upx;
		position: relative;
		margin-left: 24upx;
	}
	.rConFrTop{
		display:flex ;
		flex-direction:column;
	}
	.rConTitle{
		font-size: 28upx;
		color: #333333;
		margin-bottom: 10upx;
		margin-top: 10upx;
	}
	.rConNumb{
		color: #666666;
		font-size: 28upx;
	}
	.rConNumb text{
		color: #999999;
		font-size: 24upx;
	}
	.rConMoney{
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		bottom: 6upx;
		color: #333333;
		font-size: 26upx;
		position: absolute;
		z-index: 8;
		right:0;
	}
	.rConMoney text{
		color: #FE990A;
		font-size: 22upx;
	}
	.moreBtn{
		width:40%;
		line-height: 32upx;
		font-size: 26upx;
		color: #D7D7D7;
		text-align: center;
		margin: 10upx auto 0 auto;
		padding:10upx;
		}
	.routeBoxTwo{
		overflow: hidden;
		transition:all .3s ease;
		opacity:0;
	}	
	.animationActive{
		transition:all .3s ease;
		opacity:1;
		}
		.moreBtn image{
			width:24upx;
			height: 20upx;
			margin-right: 14upx;
		}
		.delBtn{
			height:174upx;
			width: 150upx;
			background-color: #FE990A;
			color: #FFFFFF;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right:0;
			top:18upx;
			font-size: 30upx;
		}
		/* 已消费样式 */
		/* 	.consumed{
			border-radius: 20upx;
			box-shadow: 0px 0px 15upx 0px rgba(232,232,232,1);
		}
	.consumed .timeFl text:nth-of-type(1){
			color: #bbb ;
		}
		.consumed .timeFl text:nth-of-type(2){
			color: #A2CAFD;
		} */
		.consumed .rConTitle,.rConNumb text,.consumed .rConNumb,.consumed .rConMoney text,.consumed .yusuan,
		.consumed .yusuan text,.consumed .xiaojiFl,.consumed .xiaojiFl text{
			color: #bbb ;
		}
		
	/* 暂无行程 */
	.noRoute{
		margin:76upx auto 40upx auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		}
	.noRoute image{
		width:270upx;
		height: 237upx;
	}
	.noRoute text{
		margin-top:35upx;
		font-size: 30upx;
		color: #DADADA;
	}
	/* 修改行程 */
		.changeRoute{
			transform: translateY(244upx);
			transition: all .15s linear;
			position:fixed;
			height: 244upx;
			bottom: 0upx;
			left: 0;
			z-index: 8;
			width:100%;
			background: #FFFFFF;
			border-top-left-radius: 20upx;
			border-top-right-radius: 20upx;
			}
		.changeTit{
			height: 92upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		.changeTit view{
			font-size: 30upx;
			color: #000000;
		}
		.changeTit text{
			font-size: 28upx;
			color: #666666;
			padding: 26upx;
		}
		.changeTime{
			margin-top: 30upx;
			font-size: 24upx;
			color: #000000;
			padding:0 26upx;
		}
		.changeTime text{
			color: #468CFF;
			font-size: 30upx;
			padding-left: 10upx;
		}
		.changeName{
			font-size: 30upx;
			color: #000000;
			height: 90upx;
			line-height: 90upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding:0 26upx;
		}
		.changeName input{
			margin-left: 18upx;
			color: #666666;
		}
	/* 修改预算 */
	.changeMoney{
		transform: translateY(244upx);
		transition: all .15s linear;
		position:fixed;
		height: 244upx;
		bottom: 0upx;
		left: 0;
		z-index: 8;
		width:100%;
		background: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		}
	
	
	.changeTime{
		margin-top: 30upx;
		font-size: 24upx;
		color: #000000;
		padding:0 26upx;
	}
	.changeYs{
		font-size: 30upx;
		color: #000000;
		height: 90upx;
		line-height: 90upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding:0 26upx;
	}
	.changeYs input{
		margin-left: 18upx;
		color: #666666;
	}
	.changeYs text{
		color: #FF5519;
		font-size: 30upx;
		padding-left: 20upx;
	}
	/* 底部结算 */
	.routeJiesuan{
		width:100%;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 99;
		bottom: 0;
		left:0;
		height: 98upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.jsRight{
		width:237upx;
		height: 98upx;
		line-height: 98upx;
		background: linear-gradient(left,#54B0FF,#577AFF);
		color: #FFFFFF;
		font-size: 34upx;
		text-align: center;
		
	}
	.jsRight text{
		margin-left: 5upx;
		letter-spacing: 10upx;
		text-align: center;
	}
	.jsLeft{
		line-height: 98upx;
		padding:0upx 23upx;
		display: flex;
		flex-direction: column;
		color: #333333;
	}
	.jsLeft view{
		font-size: 30upx;
	}
	
	.jsLeft view text{
		color: #FF6000;
		font-size: 22upx;
	}
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
	}
</style>
